<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>医院管理</title>
    <link rel="stylesheet" href="../../css/yygl.css">
    <link rel="stylesheet" href="../../src/font/department-font/iconfont.css">
    <script src="../../src/font/department-font/iconfont.js"></script>
    <link rel="stylesheet" href='../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css'>
    <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 col-xs-12">
          <div id="line0">
            <input type="text" id="filterInput" placeholder="请输入医院名称">
            <select id="filterSelect">
              <option value="0">请选择医院级别</option>
              <option value="1">三甲</option>
              <option value="2">甲等</option>
              <option value="3">综合医院</option>
              <option value="4">省级自立</option>
              <option value="5">市级自立</option>
            </select>
            <button id="lookup"><span class="iconfont icon-chaxun"></span>&nbsp;&nbsp;查询</button>
            <button id="clearall"><span class="iconfont icon-qingkong"></span>&nbsp;&nbsp;清空</button>
          </div>
          <div id='line1'>
            <button class='btn btn-primary' data-toggle="modal" data-target="#addNewHospitaldiv" id="addNewHospital">+ 新增医院</button>
          </div>
          <div id = 'line2'>
            <table class="table table-hover">
              <thead> 
                <tr>
                  <th>ID</th>
                  <th>医院名称</th>
                  <th>医院等级</th>
                  <th>医院图片</th>
                  <th>省份</th>
                  <th>详细地址</th>
                  <th>联系电话</th>
                  <th>启用状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="OfficeManageList"></tbody>
            </table>
          </div>
          <div id="line3">
            <span id="totalNum"></span>

            <select id="pageChange">
              <option value="0" onclick="perChoose()">5条/页</option>
              <option value="1" onclick="perChoose()">10条/页</option>
              <option value="2" onclick="perChoose()">15条/页</option>
            </select>

            <button id="pre">◁</button>
            <div id="pagebox">
            </div>
            <button id ="next">▷</button>

            <div id="gotoPage">
              <span>前往</span>
              <input type="text" id="gotoPageInput"  placeholder="请输入页数">
              <span>页</span>
              <button id="goTo">跳转</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!---------------------------- 编辑 --------------------------------->
    <div class="modal fade" id="modifydiv" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="modifyexampleModalLabel">编辑</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="modifyHosName" class="control-label" ><span class="redcolor">*</span>医院名称</label>
                <input type="text" class="form-control" id="modifyHosName" placeholder="请输入医院名称">
              </div>
              <div class="form-group">
                <label for="modifyHosLevel" class="control-label" ><span class="redcolor">*</span>医院等级</label>
                <select class="form-control"  id="modifyHosLevel">
                  <option value="0">请选择医院级别</option>
                  <option value="1">三甲</option>
                  <option value="2">甲等</option>
                  <option value="3">综合医院</option>
                  <option value="4">省级自立</option>
                  <option value="5">市级自立</option>
                </select>
              </div>
              <div class="form-group">
                <label class="control-label" ><span class="redcolor">*</span>医院图片</label>
                <div id="addpicdiv">
                  <img id="picbox">
                  <input type="file" id="addpic" hidden onchange="clickme(this)">
                  <label for="addpic" class="addimg">更换图片</label>
                </div>
              </div>
              <div class="form-group">
                <label for="modifyHosAddr" class="control-label" ><span class="redcolor">*</span>医院地址</label>
                <input type="text" class="form-control" id="modifyHosAddr" placeholder="设置医院地址">
              </div>
              <div class="form-group">
                <label for="modifyDetail" class="control-label" ><span class="redcolor">*</span>详情描述</label>
                <div>
                  <textarea id="modifyDetail"  class="form-control" ></textarea>
                </div>
              </div>
              <div class="form-group">
                <label for="modifyHosPhone" class="control-label" ><span class="redcolor">*</span>联系方式</label>
                <input type="text" class="form-control" id="modifyHosPhone" placeholder="设置联系方式">
              </div>
              <div class="form-group" id="usestate"> 
                <label class="control-label" ><span class="redcolor">*</span>启用状态</label>
                <div>
                  <label>
                    <input type="radio" name="use" id="onUse" value="1">
                    启用&nbsp;&nbsp;&nbsp;
                  </label>
                  <label>
                    <input type="radio" name="use" id="offUse" value="0">
                    禁用
                  </label>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="confirmcancel()">关闭</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="confirm()">保存</button>
          </div>
        </div>
      </div>
    </div>
    <!---------------------------- 添加医院 --------------------------------->
    <div class="modal fade" id="addNewHospitaldiv" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="addexampleModalLabel">新增医院</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="addHosName" class="control-label" ><span class="redcolor">*</span>医院名称</label>
                <input type="text" class="form-control" id="addHosName" placeholder="请输入医院名称">
              </div>
              <div class="form-group">
                <label for="addHosPro" class="control-label" ><span class="redcolor">*</span>医院所在省份</label>
                <input type="text" class="form-control" id="addHosPro" placeholder="请输入医院所在省份">
              </div>
              <div class="form-group">
                <label for="addHosLevel" class="control-label" ><span class="redcolor">*</span>医院等级</label>
                <select class="form-control"  id="addHosLevel">
                  <option value="0">请选择医院级别</option>
                  <option value="1">三甲</option>
                  <option value="2">甲等</option>
                  <option value="3">综合医院</option>
                  <option value="4">省级自立</option>
                  <option value="5">市级自立</option>
                </select>
              </div>
              <div class="form-group">
                <label class="control-label" ><span class="redcolor">*</span>医院图片</label>
                <div id="addpicdiv">
                  <img id="picbox1" src="../../src/img/黑框照片.png">
                  <input type="file" id="addpic1" hidden onchange="clickme1(this)">
                  <label for="addpic1" class="addimg">更换图片</label>
                </div>
              </div>
              <div class="form-group">
                <label for="addHosAddr" class="control-label" ><span class="redcolor">*</span>医院地址</label>
                <input type="text" class="form-control" id="addHosAddr" placeholder="设置医院地址">
              </div>
              <div class="form-group">
                <label for="addDetail" class="control-label" ><span class="redcolor">*</span>详情描述</label>
                <div>
                  <textarea id="addDetail"  class="form-control" ></textarea>
                </div>
              </div>
              <div class="form-group">
                <label for="addHosPhone" class="control-label" ><span class="redcolor">*</span>联系方式</label>
                <input type="text" class="form-control" id="addHosPhone" placeholder="设置联系方式">
              </div>
              <div class="form-group" id="addusestate"> 
                <label class="control-label" ><span class="redcolor">*</span>启用状态</label>
                <div>
                  <label>
                    <input type="radio" name="use" id="addonUse" value="1">
                    启用&nbsp;&nbsp;&nbsp;
                  </label>
                  <label>
                    <input type="radio" name="use" id="addoffUse" value="0">
                    禁用
                  </label>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="addconfirmcancel()">关闭</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addconfirm()">保存</button>
          </div>
        </div>
      </div>
    </div>
    <!---------------------------- 删除 --------------------------------->
    <div class="modal fade" tabindex="-1" role="dialog" id="canceldiv">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div id="delText">确认删除后，信息将会从医院管理列表中消失</div>
          <div>
            <button id="cancelDel" data-dismiss="modal" >取消</button>
            <button id="sureDel" data-dismiss="modal" >确认</button>
          </div>
        </div>
      </div>
    </div>



  </body>
  <script>
    //------------------------------------模拟数据生成--------------------------------------------
    let hospitalData = []
    let shenfen = ['四川','北京','重庆','上海','广东','江苏']
    let shenfenNum
    let hospitalName = ['乐清市人民医院','北京仁和医院','温州市三甲医院','北京儿童医院','妇女保健院','省立医院']
    let hospitalNameNum
    let imgAddr = "../../src/img/黑框照片.png"
    let addr = '乐清市清源路220号'
    let levelData = ['甲等','三甲','省级自立','市级自立','综合医院']
    let levelNum
    let phone = ['139','185','131']
    let phoneNum
    let newstr = '该医院暂无详细信息，添加详细信息请进行修改。'
    for(let i = 1;i<=100;i++)
    {
      let obj = {}
      obj.id = i
      hospitalNameNum = parseInt(Math.random()*(6-0)+0)
      obj.hospitalName = hospitalName[hospitalNameNum]
      levelNum = parseInt(Math.random()*(5-0)+0)
      obj.hosLevel = levelData[levelNum]
      obj.imgAddr = imgAddr
      shenfenNum = parseInt(Math.random()*(6-0)+0)
      obj.province = shenfen[shenfenNum]    
      obj.addr = addr
      phoneNum = parseInt(Math.random()*(3-0)+0)
      num1 = parseInt(Math.random()*(9876-1234)+1234)
      num2 = parseInt(Math.random()*(9876-1234)+1234)
      phoneNum = phone[phoneNum] + '-' + num1 +  '-' + num2
      obj.phoneNum = phoneNum
      obj.startState = parseInt(Math.random()*(2-0)+0)
      obj.textdetial = newstr
      hospitalData.push(obj)
    }

    let beifenData = []
    let maxPage
    let nowPage = 1
    let modifyid
    let perNum = 5
    let cancelid
    let lookupstate = 0
    let delstate = 0
    let modifystate = 0
    let addstate = 0
    let imageAddr
    let imageAddr1
    let nowAddr
    beifenData=[...hospitalData]

    initialData()
    function initialData()
    {
      nowPage = 1
      $('#gotoPageInput').val('')
      showPage(hospitalData)
      showListBy(hospitalData,1,perNum)
    }
//----------------------------筛选-----------------------
    $("#lookup").click(function(){
      nowPage = 1
      datalookup()
      lookupstate = 1
    })
    $("#clearall").click(function(){
      dataClear()
      lookupstate = 0
    })

    function datalookup(){
      hospitalData = [...beifenData]
      let lookupInput = $('#filterInput').val()
      let lookupSelect = $('#filterSelect option:selected').text()
      console.log(lookupInput)
      console.log(lookupSelect)
      if(lookupInput!='')
      {
        for(let i=0;i<hospitalData.length;i++){
          if(lookupInput!=hospitalData[i].hospitalName)
          {
            hospitalData.splice(i,1)
            i--
          }
        }
      }

      if(lookupSelect!='请选择医院级别')
      {
        for(let i=0;i<hospitalData.length;i++){
          if(hospitalData[i].hosLevel!=lookupSelect)
          {
            hospitalData.splice(i,1)
            i--
          }
        }     
      }
      // console.log(hospitalData)
      // if(delstate == 0){
      //     nowPage = 1
      // }
      // if(modifystate==0){
      //   nowPage = 1
      // }
      if(addstate==1)
      {
        maxPage = Math.ceil(beifenData.length/perNum)
        nowPage = maxPage
      }
      showPage(hospitalData)
      showListBy(hospitalData,nowPage,perNum)
    }
    
    function dataClear(){
      delstate = 0
      modifystate = 0
      $('#filterInput').val('')
      $('#filterSelect option:first-Child').prop('selected','selected')
      hospitalData = [...beifenData]
      nowPage = 1
      showPage(hospitalData)
      showListBy(hospitalData,nowPage,perNum)
    }

//--------------------------数据渲染---------------------
    function showList(data){
        $('#OfficeManageList').html('')
        for(let i=0;i<data.length;i++){
          $('#OfficeManageList').append(`
          <tr>
              <td>${data[i].id}</td>  
              <td>${data[i].hospitalName}</td>  
              <td>${data[i].hosLevel}</td>
              <td><img class='allpic' src='${data[i].imgAddr}'></img></td>
              <td>${data[i].province}</td>
              <td>${data[i].addr}</td>
              <td>${data[i].phoneNum}</td>
              <td>${data[i].startState == 1
            ? `<input onclick='switchstate(this)' dataStu = "${data[i].id}" class="switch-btn switch-btn-animbg" type="checkbox" checked>`
            :  `<input onclick='switchstate(this)' dataStu = "${data[i].id}" class="switch-btn switch-btn-animbg" type="checkbox">`
          }</td>
              <td>
                <button class='modify' dataStu = "${data[i].id}" data-toggle="modal" data-target="#modifydiv">编辑</button>
                <button class="delmodal" dataStu = "${data[i].id} "type="button" data-toggle="modal" data-target="#canceldiv">删除</button>
              </td>  
            </tr>
          `)
        }
      }
    function showListBy(data,pageNum,perNum){
      let startNum = (pageNum - 1)*perNum
      showListByData = data.slice(startNum,startNum+perNum)
      showList(showListByData)
      let leftNum = pageNum%5
      if(leftNum==0)
      {
        $('.page').eq(4).addClass('active').siblings().removeClass('active')
      }
      else
      {
        $('.page').eq(leftNum-1).addClass('active').siblings().removeClass('active')
      }
      nowPage = pageNum
    }

    function showPage(data){
      maxPage = Math.ceil(data.length/perNum)
      let intNum = parseInt(Math.ceil(nowPage/5))
      intNum--
      intNum = intNum*5
      $("#pagebox").html('')
      for(let i = intNum + 1;i<intNum + 6;i++)
      {
        if(i<=maxPage)
        {
          $("#pagebox").append(`<span class="page">${i}</span>`)
        }
        else
        {
          break
        }
      }
      $('#totalNum').html('')
      $('#totalNum').html(`共${maxPage}页`)
    }

    $('#pagebox').on('click','.page',function(){
      showListBy(hospitalData,parseInt($(this).text()),perNum)
    })
    //-----------------上下页--------------------------
    $('#pre').click(function(){
      if(nowPage>1){
        nowPage -= 1
        showPage(hospitalData)
        showListBy(hospitalData,nowPage,perNum)
      }
    })
    $('#next').click(function(){
      if(nowPage<maxPage){
        nowPage += 1
        showPage(hospitalData)
        showListBy(hospitalData,nowPage,perNum)
      }
    })

    $("#pageChange").change(function(){
      let Num =  $("#pageChange").val();
      if(Num == 0)
      {
        perNum = 5
        initialData()
      }
      else if(Num == 1)
      {
        perNum = 10
        initialData()
      }
      else if(Num == 2)
      {
        perNum = 15
        initialData()
      }
    })
    $('#goTo').click(function(){
      let num = parseInt($('#gotoPageInput').val())
      if(num>0&&num<=maxPage)
      {
        nowPage = num
        showPage(hospitalData)
        showListBy(hospitalData,num,perNum)
      }
      else{
        alert('请在正确的页码范围内输入')
      }
    })
    //---------------------删除--------------------------
    $('#OfficeManageList').on('click','.delmodal',function(e){
      cancelid = parseInt($(this).attr("dataStu"))
    })
    $('#sureDel').click(function(){
      del(cancelid)
      delstate = 1
      datalookup()
    })
    function del(id){
      let num = 0
      for(let i = 0;i<beifenData.length;i++){
        if(id==beifenData[i].id)
        {
          num = i
          beifenData.splice(i,1)
          for(let j=num;j<beifenData.length;j++)
          {
            beifenData[j].id -= 1
          }
        }
      }
    }
    //----------------------确定修改------------------
    $('#OfficeManageList').on('click','.modify',function(e){
      modifyid = $(this).attr("dataStu")
      $('#modifyexampleModalLabel').html(`编辑ID：${modifyid}的医院信息`)
      for(let i=0;i<beifenData.length;i++){
        if(beifenData[i].id==modifyid){
          nowAddr = beifenData[i].imgAddr
          imageAddr = beifenData[i].imgAddr
          let num = levelValue(beifenData[i].hosLevel)
          $('#modifyHosName').val(beifenData[i].hospitalName)
          $(`#modifyHosLevel option[value=${num}]`).prop('selected',true)
          $('#modifyHosAddr').val(beifenData[i].addr)
          $('#modifyHosPhone').val(beifenData[i].phoneNum)
          beifenData[i].startState == 1? $('#onUse').prop('checked',true) : $('#offUse').prop('checked',true)
          $('#modifyDetail').val(beifenData[i].textdetial)
        }
      }
      $('#picbox').attr('src',nowAddr)
    })
    function levelValue(str){
      if(str=='甲等')
      {
        return 2
      }
      else if(str=='三甲')
      {
        return 1
      }
      else if(str=='省级自立')
      {
        return 4
      }
      else if(str=='市级自立')
      {
        return 5
      }
      else if(str=='综合医院')
      {
        return 3
      }
    }

    function confirm(){
      let hospitalName = $('#modifyHosName').val()
      let hosLevel = $(`#modifyHosLevel option:selected`).val()
      let levelarr = ['请选择医院级别','三甲','甲等','综合医院','省级自立','市级自立']
      hosLevel = levelarr[hosLevel]
      let addr = $('#modifyHosAddr').val()
      let hosPhone = $('#modifyHosPhone').val()
      let usestate = $('#usestate input[name=use]:checked').val()
      let modifyDetails = $('#modifyDetail').val()
      for(i=0;i<beifenData.length;i++){
        if(modifyid==beifenData[i].id)
        {
          beifenData[i].hospitalName = hospitalName
          beifenData[i].addr = addr
          beifenData[i].phoneNum = hosPhone
          beifenData[i].startState = usestate
          beifenData[i].hosLevel = hosLevel
          beifenData[i].textdetial = modifyDetails
          beifenData[i].imgAddr = imageAddr
        }
      }
      modifystate = 1
      datalookup()
      $('#modifyHosName').val('')
      $(`#modifyHosLevel option:first-child`).prop('selected','selected')
      $('#modifyHosAddr').val('')
      $('#modifyHosPhone').val('')
      $('#usestate input[name=use]').prop('checked',false)

    }

    function confirmcancel(){
    }

    $('#addNewHospitaldiv').click(function(){
      $('#picbox1').attr('src','../../src/img/黑框照片.png')
      imageAddr1 = '../../src/img/黑框照片.png'
    })
    //--------------------------添加-----------------------------
    function addconfirm(){
      let hospitalName = $('#addHosName').val()
      let hosLevel = $(`#addHosLevel option:selected`).val()
      let levelarr = ['请选择医院级别','三甲','甲等','综合医院','省级自立','市级自立']
      hosLevel = levelarr[hosLevel]
      let addr = $('#addHosAddr').val()
      let HosPro = $('#addHosPro').val()
      let hosPhone = $('#addHosPhone').val()
      let usestate = $('#addusestate input[name=use]:checked').val()
      let modifyDetails = $('#addDetail').val()

      let obj = {}
      obj.id = parseInt(beifenData.length) + 1
      obj.hospitalName = hospitalName
      obj.hosLevel = hosLevel
      obj.imgAddr = imageAddr1
      obj.addr = addr
      obj.province = HosPro
      obj.phoneNum = hosPhone
      obj.textdetial = modifyDetails
      obj.startState = usestate
      beifenData.push(obj)
      addstate = 1
      datalookup()
      addstate = 0

      $('#addHosName').val('')
      $(`#addHosLevel option:first-child`).prop('selected','selected')
      $('#addHosAddr').val('')
      $('#addHosPro').val('')
      $('#addHosPhone').val('')
      $('#addusestate input[name=use]').prop('checked',false)
      $('#addDetail').val('')
    }

    function addconfirmcancel(){
      addstate = 0
      $('#addHosName').val('')
      $(`#addHosLevel option:first-child`).prop('selected','selected')
      $('#addHosAddr').val('')
      $('#addHosPro').val('')
      $('#addHosPhone').val('')
      $('#addusestate input[name=use]').prop('checked',false)
      $('#addDetail').val('')
    }

    function clickme(imgFile){
    console.log(imgFile)
    var f = imgFile.files[0]
    var filereader = new FileReader()
    filereader.onload = function(event){
      imageAddr = event.target.result
      $('#picbox').attr('src',imageAddr)
    }
    filereader.readAsDataURL(f)
  }
    function clickme1(imgFile){
    console.log(imgFile)
    var f = imgFile.files[0]
    var filereader = new FileReader()
    filereader.onload = function(event){
      imageAddr1 = event.target.result
      $('#picbox1').attr('src',imageAddr1)
    }
    filereader.readAsDataURL(f)
  }

  function switchstate(a){
    let num = $(a).attr("dataStu")
    for(let i=0;i,i<beifenData.length;i++ )
    {
      if(beifenData[i].id==num)
      {
        if(beifenData[i].startState==1){
          beifenData[i].startState=0
        }
        else{
          beifenData[i].startState=1
        }
      }
    }
      datalookup()
  }

</script>
  </body>
</html>
